<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-21 16:54:39
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 16:07:34
-->
<template>
    <div class="container">
        <a-space direction="vertical" style="width: 100%" :size="16">
            <a-card style="width: 100%" title="售后问题配置">
                <a-form :model="formState">
                    <a-row :gutter="24">
                        <a-col :span="6">
                            <a-form-item label="售后问题">
                                <a-input style="width: 100%" v-model:value="formState.searchCondition" placeholder="输入关键字查找" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item label="状态">
                                <a-select ref="select" v-model:value="formState.state" style="width: 100%" placeholder="状态">
                                    <a-select-option :value="0">全部</a-select-option>
                                    <a-select-option :value="1">启用</a-select-option>
                                    <a-select-option :value="2">禁用</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>

                <div class="layout-flexSpace">
                    <a-space wrap>
                        <a-button type="primary" @click="handleSearch">查询</a-button>
                        <a-button @click="handleReset">重置</a-button>
                    </a-space>
                    <a-space wrap>
                        <a-button type="primary" @click="handelOpen({})">新建</a-button>
                    </a-space>
                </div>
            </a-card>

            <a-card>
                <a-table :dataSource="dataSource" :columns="questionColumns" :pagination="pagination" @change="handleChangeSize">
                    <template #bodyCell="{ column, record }">
                        <template  v-if="column.key === 'content'">
                            <div v-html="record.content"></div>
                        </template>
                        <template v-if="column.key === 'position'">
                            {{ record.position == 1 ? "全部" : record.position == 2 ? "商品详情" : "客服中心" }}
                        </template>
                        <template v-if="column.key === 'state'">
                            {{ record.state == 1 ? "启用" : "禁用" }}
                        </template>
                        <template v-if="column.key === 'operate'">
                            <a-space>
                                <a-button type="primary" @click="handelOpen(record)">编辑</a-button>
                                <a-popconfirm
                                    :title="`您是否要${
                                        record.state == 1 ? '启用' : '禁用'
                                    }此条数据?`"
                                    @confirm="handleStateChange(record)"
                                    >
                                    <a-button v-if="record.state == 1" danger type="primary"
                                        >禁用</a-button
                                    >
                                    <a-button v-else type="primary"
                                        >启用</a-button
                                    >
                                </a-popconfirm>
                                <a-popconfirm title="您是否要删除此条数据?" ok-text="是" cancel-text="否" @confirm="confirm">
                                    <a-button danger type="primary">删除</a-button>
                                </a-popconfirm>

                            </a-space>
                        </template>
                    </template>
                </a-table>
            </a-card>
        </a-space>
        <serverQuestion ref="hotCakesRef" @refreshList="refreshList" />
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { questionColumns } from './columns.js'
import serverQuestion from './components/serverQuestion.vue'
import { getProblem, saveProblem, delProblem } from '@/api/sysConfig.js'
const pagination = ref({
    current: 1,
    pageSize: 10,
    defaultPageSize: 10,
    total: 0,
    showSizeChanger: true,
    pageSizeOptions: ['10', '20', '50', '100'],
    showTotal: () => `共 ${pagination.value.total} 条`,
})
const formState = ref({
    page: pagination.value.current,
    pageSize: pagination.value.pageSize,
    searchCondition: undefined,
    state: undefined,
    typeId: 3
})
const hotCakesRef = ref(null)
const dataSource = ref([
])
// 获取问题列表
const getQuestionList = async () =>{
    const data = await getProblem(formState.value)
    if(data.code === 200) {
        dataSource.value = data.data.list
        pagination.value.total = data.data.total
    }
}
function handleSearch() {
    formState.value.page = 1
  formState.value.pageSize = 10
    getQuestionList()
}
const handelOpen = (record) => {
    hotCakesRef.value.open(record)
}
const confirm = () => {}
function handleReset() {
    formState.value = {
        page: 1,
        pageSize: 10,
        searchCondition: undefined,
        state: undefined,
        typeId: 3
    }
    pagination.value.current = 1
  pagination.value.pageSize = 10
    getQuestionList()
}

function handleChangeSize(page) {
    formState.value.page = page.current
    formState.value.pageSize = page.pageSize
    pagination.value.current = page.current
    pagination.value.pageSize = page.pageSize
    getQuestionList()
}
// 禁用
function handleStateChange(row) {
    saveProblem({ typeId: row.typeId,position:row.position, id: row.id, state: row.state == 1 ? 2 : 1 }).then(
    (res) => {
      if (res.code === 200) {
        getQuestionList();
      }
    }
  );
}
function refreshList() {
    getQuestionList()
}
onMounted(() => {
    getQuestionList()
})
</script>
  
  <style lang="less">
.img-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .img-label {
        margin-top: 6px;
        color: #9599a5;
        font-size: 12px;
    }
}
</style>
  